<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				var timer = null;
				var index = 0;
				var array = new Array(0,1,2,5,8,7,6,3);
				$('li').css("opacity",0.4)
				$('#start').click(function(){				
					timer = setInterval(auto1,100);
				})
				$('#stop').click(function(){
					clearInterval(timer)
				});
				function auto1(){
					if(index==array.length){
						index =0;
					}
					var random = Math.floor(Math.random()*9);
					$('li').eq(array[index]).css('opacity',1).siblings().css("opacity",0.4);
					index++;
					console.log(index);
				}
				
			});
		</script>
		<style>
			ul,li{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			body{
			}
			.box{
				padding-top: 10px;
				padding-top: 10px;
				border-radius: 30px;
				width: 920px;
				height: 940px;
				border: solid 1px black;
				margin: 10px auto;
			}
			ul li img{
				width: 300px;
				border-radius: 200px;
				background-color: beige;
			}
			ul li{
				float: left;
				margin-right: 5px;

			}
			.box1{
				padding-left: 840px;
				width: 920px;
				margin: 10px auto;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<input type="button" name="start" id="start" value="开始" />
			<input type="button" name="stop" id="stop" value="暂停" />
		</div>
		<div class="box">
			<ul>
				<li><img src="img/p1.png" alt=""></li>
				<li><img src="img/p2.png" alt=""></li>
				<li><img src="img/p3.png" alt=""></li>
				<li><img src="img/p4.png" alt=""></li>
				<li><img src="img/p5.png" alt=""></li>
				<li><img src="img/p6.png" alt=""></li>
				<li><img src="img/p7.png" alt=""></li>
				<li><img src="img/p8.png" alt=""></li>
				<li><img src="img/p9.png" alt=""></li>
			</ul>
		</div>
	</body>
</html>
